import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class BorrowReturnDetailModal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { children, dispatch, item, } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        };
        const formItemLayout2 = {
            labelCol: { span: 2 },
            wrapperCol: { span: 18 },
        };
        const formItemLayout3 = {
            labelCol: { span: 3 },
            wrapperCol: { span: 18 },
        };
        const columns = [{
            title: '资产编号',
            dataIndex: 'assetNo',
            key: 'assetNo',
            fixed: 'left',
            width: 150
        }, {
            title: '资产分类',
            dataIndex: 'typeName',
            key: 'typeName',
            width: 120
        }, {
            title: '设备名称',
            dataIndex: 'assetName',
            key: 'assetName',
            width: 150
        }, {
            title: '设备型号',
            dataIndex: 'modelName',
            key: 'modelName',
            width: 120,
        }, {
            title: '设备序列号',
            dataIndex: 'serialNo',
            key: 'serialNo',
            width: 150,
        }, {
            title: 'RFID编码',
            dataIndex: 'rfidNo',
            key: 'rfidNo',
            width: 100,
        },
        {
            title: '借用类型',
            dataIndex: 'borrowType',
            key: 'borrowType',
            width: 100,
            render: (value, row, index) => {
                return (
                    value == 1 ? "内部借用" : value == 2 ? "外部借用" : ''
                )
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 80,
            render: (value, row, index) => {
                return (
                    value == 1 ? "新增状态" : value == 2 ? "已借用" : value == 3 ? "已归还" : ''
                )
            }
        },
        {
            title: '原管理部门',
            dataIndex: 'originalManageBranchName',
            key: 'originalManageBranchName',
            width: 120,
        },
        {
            title: '原归属部门',
            dataIndex: 'originalUseBranchName',
            key: 'originalUseBranchName',
            width: 120,
        },
        {
            title: '原领用人',
            dataIndex: 'originalEndUserName',
            key: 'originalEndUserName',
            width: 120,
        },
        {
            title: '借用管理部门',
            dataIndex: 'targetManageBranchName',
            key: 'targetManageBranchName',
            width: 120,
        },
        {
            title: '借用部门',
            dataIndex: 'targetUseBranchName',
            key: 'targetUseBranchName',
            width: 120,
        },
        {
            title: '借用人',
            dataIndex: 'targetEndUserName',
            key: 'targetEndUserName',
            width: 120,
        },
        {
            title: '备注',
            dataIndex: 'returnRemark',
            key: 'returnRemark',
            width: 150,
        },
        ];

        return (
            <span>
                <Modal
                    maskClosable={this.props.maskClosable}
                    confirmLoading={this.props.confirmLoading}
                    title={this.props.title}
                    width={1000}
                    visible={this.props.visible}
                    footer={[
                        <Button key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                    ]}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
                >
                    <div style={{ width: 'auto', backgroundColor: '#fff' }}>
                        <div style={{ }}>
                            <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                                <Form layout={'inline'} style={{ marginTop: 0 }}>
                                    <Row gutter={16}>
                                        <Col span={8}>
                                            <FormItem
                                                label="单号"
                                            >
                                                {
                                                    getFieldDecorator('id', {
                                                        initialValue: item.id_,
                                                    })(<Input readOnly="readonly" style={{ width: '200px' }} />)
                                                }
                                            </FormItem>
                                        </Col>

                                        <Col span={8}>
                                            <FormItem
                                                label="操作人"
                                            >
                                                {getFieldDecorator('userName', {
                                                    initialValue: item.userName,
                                                })(<Input readOnly="readonly" style={{ width: '200px' }} />)}
                                            </FormItem>
                                        </Col>
                                        {/* <Col span={6}>
                                            <FormItem
                                                label="借用类型"
                                            >
                                                {getFieldDecorator('borrowType', {
                                                    initialValue: item.borrowType === 1 ? '内部借用' : item.borrowType === 2 ? '外部借用' : '',
                                                })(<Input readOnly="readonly" style={{ width: '120px' }} />)
                                                }
                                            </FormItem>
                                        </Col> */}
                                        <Col span={8}>
                                            <FormItem
                                                label="预计执行时间"
                                            >
                                                {
                                                    getFieldDecorator('execute_time', {
                                                        initialValue: item.executeTime,
                                                    })(<Input readOnly="readonly" style={{ width: '200px' }} />)
                                                }
                                            </FormItem>
                                        </Col>
                                    </Row>

                                    <Row style={{ marginTop: '20px' }}>
                                        <Col span={24}>
                                            <FormItem
                                                label="备注"
                                            >
                                            {
                                              getFieldDecorator('remark', {
                                                initialValue: item.remark,
                                              })(<Input style={{ width: '890px' }} readOnly="readonly" type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                                            }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '20px', marginBottom: '10px' }}>
                                        <Col span={24}>
                                            <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                                        </Col>
                                    </Row>
                                    <div style={{ }}>
                                        <div style={{ width: '100%', padding: "10px 20px 20px"  }}>
                                            <Table columns={columns}
                                                rowKey={record => record.id_}
                                                dataSource={item.borrowReturnDetail}
                                                pagination={false}
                                                scroll={{ x: 2000 }}
                                            />
                                        </div>
                                    </div>
                                </Form>
                            </div>
                        </div>
                    </div>
                </Modal>

            </span>
        );
    }

}

export default Form.create()(BorrowReturnDetailModal)
